<template>
  <n-layout has-sider style="height: 100vh">
    <n-layout-sider
      bordered
      collapse-mode="width"
      :collapsed-width="64"
      :width="240"
      :collapsed="collapsed"
      show-trigger
      @collapse="collapsed = true"
      @expand="collapsed = false"
    >
      <div class="logo">
        <n-icon size="32" color="#18A058">
          <HeartOutline />
        </n-icon>
        <span v-show="!collapsed" class="logo-text">志愿者平台</span>
      </div>
      
      <n-menu
        :collapsed="collapsed"
        :collapsed-width="64"
        :collapsed-icon-size="22"
        :options="menuOptions"
        :value="activeKey"
        @update:value="handleMenuSelect"
      />
    </n-layout-sider>

    <n-layout>
      <n-layout-header bordered style="height: 64px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between;">
        <n-breadcrumb>
          <n-breadcrumb-item>{{ currentRoute?.meta?.title || '首页' }}</n-breadcrumb-item>
        </n-breadcrumb>
        
        <n-dropdown :options="userOptions" @select="handleUserAction">
          <n-button text>
            <n-space>
              <n-avatar round size="small">
                {{ userStore.nickname?.charAt(0) || 'U' }}
              </n-avatar>
              <span>{{ userStore.nickname }}</span>
            </n-space>
          </n-button>
        </n-dropdown>
      </n-layout-header>

      <n-layout-content content-style="padding: 24px;" :native-scrollbar="false">
        <router-view />
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<script setup>
import { ref, computed, h } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { NIcon } from 'naive-ui'
import {
  HomeOutline,
  CalendarOutline,
  ListOutline,
  TrophyOutline,
  NotificationsOutline,
  PersonOutline,
  StatsChartOutline,
  SettingsOutline,
  PeopleOutline,
  HeartOutline,
  LogOutOutline
} from '@vicons/ionicons5'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const collapsed = ref(false)
const currentRoute = computed(() => route)
const activeKey = computed(() => route.path)

const renderIcon = (icon) => {
  return () => h(NIcon, null, { default: () => h(icon) })
}

const menuOptions = computed(() => {
  const baseMenu = [
    {
      label: '仪表盘',
      key: '/dashboard',
      icon: renderIcon(HomeOutline)
    },
    {
      label: '活动列表',
      key: '/activity/list',
      icon: renderIcon(CalendarOutline)
    },
    {
      label: '我的活动',
      key: '/activity/my',
      icon: renderIcon(CalendarOutline)
    },
    {
      label: '需求列表',
      key: '/demand/list',
      icon: renderIcon(ListOutline)
    },
    {
      label: '我的积分',
      key: '/point',
      icon: renderIcon(TrophyOutline)
    },
    {
      label: '通知公告',
      key: '/notification/list',
      icon: renderIcon(NotificationsOutline)
    },
    {
      label: '志愿者列表',
      key: '/volunteer/list',
      icon: renderIcon(PeopleOutline)
    },
    {
      label: '我的信息',
      key: '/volunteer/my-info',
      icon: renderIcon(PersonOutline)
    },
    {
      label: '个人中心',
      key: '/profile',
      icon: renderIcon(PersonOutline)
    }
  ]

  if (userStore.isAdmin()) {
    baseMenu.push(
      {
        label: '创建活动',
        key: '/activity/create',
        icon: renderIcon(SettingsOutline)
      },
      {
        label: '活动/需求管理',
        key: '/activity/manage',
        icon: renderIcon(SettingsOutline)
      },
      {
        label: '发布需求',
        key: '/demand/publish',
        icon: renderIcon(SettingsOutline)
      },
      {
        label: '公告管理',
        key: '/notification/manage',
        icon: renderIcon(SettingsOutline)
      },
      {
        label: '数据统计',
        key: '/statistics/overview',
        icon: renderIcon(StatsChartOutline)
      },
      {
        label: '用户管理',
        key: '/system/user',
        icon: renderIcon(SettingsOutline)
      }
    )
  }

  return baseMenu
})

const userOptions = [
  {
    label: '个人中心',
    key: 'profile',
    icon: renderIcon(PersonOutline)
  },
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(LogOutOutline)
  }
]

const handleMenuSelect = (key) => {
  router.push(key)
}

const handleUserAction = (key) => {
  if (key === 'logout') {
    window.$dialog?.warning({
      title: '退出登录',
      content: '确定要退出登录吗？',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: () => {
        userStore.logout()
        router.push('/login')
        window.$message?.success('已退出登录')
      }
    })
  } else if (key === 'profile') {
    router.push('/profile')
  }
}
</script>

<style scoped>
.logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #18A058;
}
</style>
